<!DOCTYPE html>
<html>
<head>
    <title>自动启动贪吃蛇游戏</title>
    <style>
        :root {
            --primary-color: #2ecc71;
            --secondary-color: #e74c3c;
            --dark-color: #2c3e50;
            --light-color: #ecf0f1;
            --shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #3498db, #9b59b6);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--light-color);
        }
        
        .game-container {
            position: relative;
            width: 420px;
            height: 420px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: var(--shadow);
            background-color: var(--dark-color);
        }
        
        #game-canvas {
            width: 100%;
            height: 100%;
            display: none;
            background-color: #34495e;
        }
        
        .game-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: rgba(44, 62, 80, 0.9);
            z-index: 10;
            padding: 20px;
            box-sizing: border-box;
            text-align: center;
        }
        
        #start-screen {
            display: flex;
        }
        
        #game-over {
            display: none;
        }
        
        .game-title {
            font-size: 36px;
            margin-bottom: 20px;
            color: var(--primary-color);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .difficulty-options {
            margin: 25px 0;
            display: flex;
            gap: 10px;
        }
        
        .difficulty-option {
            padding: 10px 20px;
            background-color: #34495e;
            color: var(--light-color);
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            border: 2px solid transparent;
        }
        
        .difficulty-option:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
        }
        
        .difficulty-option.selected {
            background-color: var(--primary-color);
            border-color: var(--light-color);
            transform: translateY(-3px);
        }
        
        .game-button {
            margin-top: 20px;
            padding: 12px 35px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: var(--shadow);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .game-button:hover {
            background-color: #27ae60;
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }
        
        .game-button:active {
            transform: translateY(0);
        }
        
        #score-display {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 18px;
            font-weight: bold;
            display: none;
            z-index: 5;
            color: white;
        }
        
        .instructions {
            margin-top: 30px;
            max-width: 400px;
            text-align: center;
            line-height: 1.6;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            backdrop-filter: blur(5px);
        }
        
        .snake-icon {
            font-size: 24px;
            margin-right: 10px;
        }
        
        .food-icon {
            color: var(--secondary-color);
        }
    </style>
</head>
<body>
    <div class="game-container">
        <canvas id="game-canvas" width="400" height="400"></canvas>
        
        <div id="score-display">得分: 0</div>
        
        <div id="start-screen" class="game-overlay">
            <h1 class="game-title">贪吃蛇</h1>
            
            <div class="difficulty-options">
                <div class="difficulty-option selected" data-speed="150">简单</div>
                <div class="difficulty-option" data-speed="100">中等</div>
                <div class="difficulty-option" data-speed="50">困难</div>
            </div>
            
            <button id="start-btn" class="game-button">开始游戏</button>
        </div>
        
        <div id="game-over" class="game-overlay">
            <h1 class="game-title">游戏结束</h1>
            <p id="final-score" style="font-size: 24px; margin-bottom: 20px;">得分: 0</p>
            <button id="restart-btn" class="game-button">再玩一次</button>
        </div>
    </div>
    
    <div class="instructions">
        <p><span class="snake-icon">🐍</span> 使用方向键 ↑ ↓ ← → 控制蛇的移动</p>
        <p><span class="snake-icon food-icon">🍎</span> 吃到食物增长身体，不要撞到墙壁或自己!</p>
    </div>

    <script>
        // 获取Canvas元素和上下文
        const canvas = document.getElementById('game-canvas');
        const ctx = canvas.getContext('2d');
        
        // 游戏参数
        const gridSize = 20;
        const tileCount = canvas.width / gridSize;
        let score = 0;
        let gameSpeed = 150; // 默认速度(简单难度)
        
        // 蛇的初始状态
        let snake = [
            {x: 10, y: 10}
        ];
        let direction = {x: 1, y: 0}; // 初始向右移动
        let nextDirection = {x: 1, y: 0}; // 初始向右移动
        
        // 食物的位置
        let food = {
            x: Math.floor(Math.random() * tileCount),
            y: Math.floor(Math.random() * tileCount)
        };
        
        // 游戏状态
        let gameRunning = false;
        let gameLoopTimeout;
        
        // 游戏主循环
        function gameLoop() {
            if (gameRunning) {
                gameLoopTimeout = setTimeout(() => {
                    changeDirection();
                    if (checkGameOver()) {
                        gameOver();
                    } else {
                        moveSnake();
                        checkFood();
                        drawGame();
                        gameLoop();
                    }
                }, gameSpeed);
            }
        }
        
        // 改变蛇的方向
        function changeDirection() {
            direction = {...nextDirection};
        }
        
        // 移动蛇
        function moveSnake() {
            // 创建新的头部
            const head = {
                x: snake[0].x + direction.x,
                y: snake[0].y + direction.y
            };
            
            // 将新头部添加到数组开头
            snake.unshift(head);
            
            // 如果没有吃到食物，移除尾部
            if (!checkFood()) {
                snake.pop();
            }
        }
        
        // 检查是否吃到食物
        function checkFood() {
            if (snake[0].x === food.x && snake[0].y === food.y) {
                // 生成新的食物位置
                food = {
                    x: Math.floor(Math.random() * tileCount),
                    y: Math.floor(Math.random() * tileCount)
                };
                
                // 检查食物是否生成在蛇身上
                for (let i = 0; i < snake.length; i++) {
                    if (food.x === snake[i].x && food.y === snake[i].y) {
                        return checkFood(); // 递归直到找到合适位置
                    }
                }
                
                // 增加分数
                score++;
                document.getElementById('score-display').textContent = `得分: ${score}`;
                
                return true;
            }
            return false;
        }
        
        // 检查游戏结束条件
        function checkGameOver() {
            const head = snake[0];
            
            // 检查是否撞墙
            if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
                return true;
            }
            
            // 检查是否撞到自己
            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    return true;
                }
            }
            
            return false;
        }
        
        // 游戏结束处理
        function gameOver() {
            gameRunning = false;
            clearTimeout(gameLoopTimeout);
            document.getElementById('final-score').textContent = `得分: ${score}`;
            document.getElementById('game-over').style.display = 'flex';
        }
        
        // 开始游戏
        function startGame() {
            // 重置游戏状态
            snake = [{x: 10, y: 10}];
            direction = {x: 1, y: 0}; // 重置为向右移动
            nextDirection = {x: 1, y: 0}; // 重置为向右移动
            score = 0;
            document.getElementById('score-display').textContent = `得分: ${score}`;
            food = {
                x: Math.floor(Math.random() * tileCount),
                y: Math.floor(Math.random() * tileCount)
            };
            
            // 显示游戏元素
            document.getElementById('game-canvas').style.display = 'block';
            document.getElementById('score-display').style.display = 'block';
            document.getElementById('start-screen').style.display = 'none';
            document.getElementById('game-over').style.display = 'none';
            
            // 绘制初始状态
            drawGame();
            
            // 开始游戏循环
            gameRunning = true;
            gameLoop();
        }
        
        // 绘制游戏
        function drawGame() {
            // 清空画布
            ctx.fillStyle = '#34495e';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制网格线
            ctx.strokeStyle = '#2c3e50';
            ctx.lineWidth = 0.5;
            for (let i = 0; i < tileCount; i++) {
                ctx.beginPath();
                ctx.moveTo(i * gridSize, 0);
                ctx.lineTo(i * gridSize, canvas.height);
                ctx.stroke();
                
                ctx.beginPath();
                ctx.moveTo(0, i * gridSize);
                ctx.lineTo(canvas.width, i * gridSize);
                ctx.stroke();
            }
            
            // 绘制蛇
            snake.forEach((segment, index) => {
                const gradient = ctx.createLinearGradient(
                    segment.x * gridSize, 
                    segment.y * gridSize, 
                    segment.x * gridSize + gridSize, 
                    segment.y * gridSize + gridSize
                );
                
                if (index === 0) {
                    // 蛇头
                    gradient.addColorStop(0, '#2ecc71');
                    gradient.addColorStop(1, '#27ae60');
                    
                    // 绘制蛇头
                    ctx.fillStyle = gradient;
                    ctx.beginPath();
                    ctx.roundRect(
                        segment.x * gridSize + 1, 
                        segment.y * gridSize + 1, 
                        gridSize - 2, 
                        gridSize - 2, 
                        5
                    );
                    ctx.fill();
                    
                    // 蛇眼
                    ctx.fillStyle = 'white';
                    ctx.beginPath();
                    ctx.arc(
                        segment.x * gridSize + gridSize/3, 
                        segment.y * gridSize + gridSize/3, 
                        2, 
                        0, 
                        Math.PI * 2
                    );
                    ctx.arc(
                        segment.x * gridSize + gridSize*2/3, 
                        segment.y * gridSize + gridSize/3, 
                        2, 
                        0, 
                        Math.PI * 2
                    );
                    ctx.fill();
                } else {
                    // 蛇身
                    const colorValue = 150 - Math.min(140, index * 2);
                    ctx.fillStyle = `rgb(46, 204, 113, ${1 - index * 0.01})`;
                    ctx.beginPath();
                    ctx.roundRect(
                        segment.x * gridSize + 1, 
                        segment.y * gridSize + 1, 
                        gridSize - 2, 
                        gridSize - 2, 
                        3
                    );
                    ctx.fill();
                }
            });
            
            // 绘制食物
            ctx.fillStyle = '#e74c3c';
            ctx.beginPath();
            ctx.arc(
                food.x * gridSize + gridSize/2, 
                food.y * gridSize + gridSize/2, 
                gridSize/2 - 2, 
                0, 
                Math.PI * 2
            );
            ctx.fill();
            
            // 食物光泽效果
            ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
            ctx.beginPath();
            ctx.arc(
                food.x * gridSize + gridSize/2 + 2, 
                food.y * gridSize + gridSize/4, 
                3, 
                0, 
                Math.PI * 2
            );
            ctx.fill();
        }
        
        // 键盘控制
        document.addEventListener('keydown', event => {
            if (!gameRunning) return;
            
            // 防止连续按键导致反向移动
            switch(event.key) {
                case 'ArrowUp':
                    if (direction.y === 0) nextDirection = {x: 0, y: -1};
                    break;
                case 'ArrowDown':
                    if (direction.y === 0) nextDirection = {x: 0, y: 1};
                    break;
                case 'ArrowLeft':
                    if (direction.x === 0) nextDirection = {x: -1, y: 0};
                    break;
                case 'ArrowRight':
                    if (direction.x === 0) nextDirection = {x: 1, y: 0};
                    break;
            }
        });
        
        // 开始游戏按钮
        document.getElementById('start-btn').addEventListener('click', startGame);
        
        // 重新开始游戏
        document.getElementById('restart-btn').addEventListener('click', startGame);
        
        // 难度选择
        const difficultyOptions = document.querySelectorAll('.difficulty-option');
        difficultyOptions.forEach(option => {
            option.addEventListener('click', function() {
                // 移除所有选项的selected类
                difficultyOptions.forEach(opt => opt.classList.remove('selected'));
                // 为当前选项添加selected类
                this.classList.add('selected');
                // 设置游戏速度
                gameSpeed = parseInt(this.dataset.speed);
            });
        });
    </script>
</body>
</html>